import React, { Ref } from "react";
import { Card, Row, Col, message, Modal, Form, Table, Button, Input } from "antd";
import { FormComponentProps, FormCreateOption } from "antd/lib/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";

import "./index.less";

/**
 * 对于表单的封装, 只输出表单, 不对其双向绑定操作
 */

const FormItem = Form.Item;

// interface IProps extends FormComponentProps {
// 	aa?: string;
// 	onChang?: (props: any, changedValues: any, allValues: any) => void;
// }

interface IProps extends FormComponentProps {}

interface IStates {}

const formItemLayout: FormItemProps = {
	labelCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 2,
		},
	},
	wrapperCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 4,
		},
	},
};

class SubForm extends React.Component<IProps, IStates> {
	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {};
	}

	render() {
		const { getFieldDecorator } = this.props.form;

		return (
			<div>
				<Form>
					<FormItem label="aa" {...formItemLayout}>
						{getFieldDecorator("aa")(<Input type="text" placeholder="字段1" />)}
					</FormItem>
					<FormItem label="bb" {...formItemLayout}>
						{getFieldDecorator("bb")(<Input type="text" placeholder="字段2" />)}
					</FormItem>
					<FormItem label="cc" {...formItemLayout}>
						{getFieldDecorator("cc")(<Input type="text" placeholder="字段3" />)}
					</FormItem>
				</Form>
			</div>
		);
	}
}

// const formCreateOption: FormCreateOption<FormComponentProps> = {
// 	name: "subForm-test",
// 	onValuesChange: (props, changedValues, allValues) => {
// 		console.log(props);
// 		console.log(changedValues);
// 		console.log(allValues);
// 	},
// };

// const WrapSubForm = Form.create<FormComponentProps>(formCreateOption)(SubForm);
// const WrapSubForm = Form.create<IProps>(formCreateOption)(SubForm);

export default SubForm;
